<template>
  <a-spin :spinning="spinning" tip="工程类别加载中..." style="width:100%">
    <!-- 工程类别选项卡 -->
    <a-tabs v-if="titleList.length > 0" v-model="projectTypeId" @change="handleChange">
      <!-- 工程类别列表 -->
      <a-tab-pane v-for="item in titleList" :key="item.projectTypeId">
        <div slot="tab">
          {{ item.projectTypeName }}
          <span class="del_btn" v-if="!item.status">（停用）</span>
        </div>
        <slot />
      </a-tab-pane>
    </a-tabs>
    <div v-if="titleList.length == 0 && !spinning" class="mb12" align="center" style="width: 100%">
      <b>暂无工程类别信息，请先添加工程类别</b>
    </div>
  </a-spin>
</template>

<script>
import { projectType } from '@/api/quality/currency' // api

export default {
  name:'TabsProductType',
  data() {
    return {
      spinning: false, // 加载控件
      titleList: [], // 工程类别列表
    }
  },
  props: {
    // 当前工程类别id
    id: {
      type: [String, Number],
      default: () => '',
    },
    // 是否显示包括禁用的全部咧白哦
    isAll: {
      type: Boolean,
      default: () => false,
    },
  },
  computed: {
    // 选中工程类别id
    projectTypeId: {
      get: function () {
        return this.id
      },
      set: function (e) {
        this.$emit('update:id', e)
        // this.$emit(
        //   'update:option',
        //   this.titleList.find((item) => item.projectTypeId == e)
        // )
      },
    },
    option() {
      let e = this.projectTypeId
      return this.titleList.find((item) => item.projectTypeId == e)
    },
  },
  watch: {
    option(e) {
      this.$emit('update:option', e)
    },
  },
  mounted() {
    // 初始化列表
    this.getTitle().then((res) => {
      if (res) {
        this.$emit('switch')
      }
    })
  },
  methods: {
    // 获取工程类别列表
    getTitle() {
      this.spinning = true
      return projectType
        .getList()
        .then((res) => {
          this.spinning = false
          if (res.code == 200) {
            let hasList = res.data.length > 0
            if (this.isAll) {
              this.titleList = res.data
            } else {
              this.titleList = res.data.filter((item) => item.status == 1) // 过滤停用项
            }
            // 更新选中项
            // this.$emit(
            //   'update:option',
            //   this.titleList.find((item) => item.projectTypeId == this.projectTypeId)
            // )
            !this.projectTypeId && hasList && (this.projectTypeId = this.titleList[0].projectTypeId) // 设置第一个为默认选项
            return hasList
          }
        })
        .catch((e) => {
          this.spinning = false
        })
    },
    // 切换工程类别
    handleChange(e) {
      this.projectTypeId = e
      // 获取分项工程
      this.$nextTick(() => {
        this.$emit('switch', e)
      })
    },
  },
}
</script>
